<template>
  <div>
    <el-card class="box-card" style="margin: auto">
      <el-row>
        <el-col
          ><el-button type="primary" @click="addUser">添加</el-button></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="10" style="margin-top: 5px"
          >Total {{ totaluser }} users</el-col
        >
        <el-col :span="8"
          ><div class="demo-input-suffix">
            Search
            <el-input
              placeholder="用户名"
              prefix-icon="el-icon-search"
              v-model="keyword"
              style="width: 200px"
              @keypress.enter.native="search"
            >
            </el-input></div
        ></el-col>
      </el-row>
      <el-table :data="userList" style="width: 100%" border stripe>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="tschool" label="目标院校" width="280">
        </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="qq" label="QQ"> </el-table-column>
        <el-table-column prop="sex" label="性别"> </el-table-column>
        <el-table-column prop="telphone" label="手机号"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="editUser(userList[scope.$index].id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delUser(scope.$index)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top: 25px">
        <el-col>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 10, 20, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totaluser"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import userApi from "@/api/ky";
export default {
  data() {
    return {
      keyword: "",
      currentPage: 1, //初始页
      pagesize: 10,
      userList: [],
      totaluser: 0,
    };
  },
  methods: {
    search() {
      if (this.keyword.trim == "") {
        return this.userList;
      }
      return this.getUserList();

      //   let result = this.userList.filter((element) => {
      //     return element.username.includes(this.keyword);
      //   });
      //   return result;
    },
    //删除用户
    delUser(index) {
      //this.userList.splice(index,1)
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          userApi.delUser(this.userList[index].id).then((res) => {
            console.log(res)
            if (res.data.flag == true) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
          this.getUserList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑用户
    editUser(index) {
      console.log(index);
      this.$emit("editPage", index);
    },
    //添加用户
    addUser() {
      this.$emit("addPage");
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange(size) {
      this.pagesize = size;
      //  console.log(this.pagesize)  //每页下拉显示数据
      this.getUserList();
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getUserList();
      // console.log(this.currentPage)  //点击第几页
    },
    //获取用户信息
    getUserList() {
      userApi
        .getUserInfo(this.pagesize, this.currentPage, this.keyword)
        .then((res) => {
          this.userList = res.data.rows;
          this.totaluser = res.data.total;
        });
    },
  },
  beforeMount() {
    this.getUserList();
  },
};
</script>

<style>
.el-row {
  margin-bottom: 15px;
}
</style>